<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="statistics-top">
            <h3>总量统计</h3>
            <el-row :gutter="41">
                <el-col :span="12">
                    <div>卡券订单总量（条）</div>
                    <div><b>{{topData.totalNum}}</b></div>              
                </el-col>
                <el-col :span="12">              
                    <div>卡券销售总额（元）</div>
                    <div><b>{{topData.totalMoney}}</b></div>                
                </el-col>
            </el-row>
        </div>
        <div class="statistics-con">
            <h3>月统计</h3>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column align="center" label="月份">
                    <template scope="scope">
                        <span>{{ scope.row.date  | isNull}}</span>
                    </template>
                </el-table-column>   
                <el-table-column align="center" label="月订单量（条）">
                    <template scope="scope">
                        <span>{{scope.row.sCardCouponsNum  | isNull}}</span>
                    </template>
                </el-table-column>    
                <el-table-column align="center" label="月销售额（元）">
                    <template scope="scope">
                        <span>{{scope.row.sOrderMoney  | isNull}}</span>
                    </template>
                </el-table-column>                
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes"
                :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../layout/Levelbar';
    import { mapState, mapActions } from 'vuex';
    import {getIncrementCardCouponsNum, getIncrementCardCouponsByMonth} from 'api/cardCoupons';
    export default {
        name: 'cardStatistics',
        components: {Levelbar},
        data() {
            return {
                topData: {      // 总量统计
                    totalNum: 0,
                    totalMoney: 0
                },                
                loading: true,  
                tableData: [], // 月统计
                pageQuery: {
                    page: 1,
                    total: 0
                }
            }
        },
        created() {
            this.getTotalData();
            this.getCradList();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.getCradList();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.getCradList();
            },
            // 卡券总量统计
            getTotalData() {
                getIncrementCardCouponsNum().then(response => {
                    this.topData.totalMoney = response.data.content.orderMoney;
                    this.topData.totalNum = response.data.content.orderNum;

                });               
            },
            // 卡券月统计
            getCradList() {
                this.loading = true;
                getIncrementCardCouponsByMonth(
                    this.pageQuery.page, this.config.pageSize).then(response => {
                        this.tableData=response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        $borderColor:#ebebeb;
        @mixin title3{
            line-height: 40px;
            font-weight: normal;
            font-size:14px;            
        }
        .app-levelbar {
            height: 35px;
        }
        .statistics-top{
            border:1px solid $borderColor;
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            h3{
                @include title3;
                text-indent: 20px;
                border-bottom: 1px solid $borderColor;              
            }
            .el-row{
                padding: 20px 0;
                font-size: 14px;
                .el-col{
                    text-align: center;
                    color:#333;
                    line-height: 32px;
                    b{
                        font-size: 24px;
                    }
                    &:nth-child(1){
                        border-right:1px solid $borderColor ;
                    }
                }
            }
        }
        .statistics-con{
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            border-left: 1px solid $borderColor;
            background: $bgcolor;
            padding: 0 20px;
            h3{
                @include title3;
            }
            .pagination-container {
                text-align: right;
                padding-right: 20px;
            }
        }
    }
</style>